<template>
    <!-- 选择订单弹窗（系统） -->
    <drag-modal  :visible="visible" :title="modalTitle" @cancel="onModalClose" width="1000px" >
        <div class="confirm-bt">
             <a-button type="primary" size="small" @click="confirmSelect()">确定选择</a-button>
        </div>
        <div class="form-search-wrapper" style="min-height:200px;">
            <a-table :scroll="{ x: auto, y: 400}" :columns="columns" :data-source="dataSource"  :row-selection="rowSelection"  @change="onTableChange" bordered :pagination="pagination"  :loading="false">
            </a-table>
        </div>
    </drag-modal>
</template>

<script>
import { mapState } from "vuex";
import { sysPageList} from "@/api/expenses/businessOrder";

export default {
    data () {
        const columns = [
            {
                align: "left",
                title: "订单号",
                dataIndex: "businessOrderNo",
                width: 150,
            },
            
             {
                align: "left",
                title: "订单类型",
                dataIndex: "orderType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 1:showText = <sapn style="color:#028C10">新购</sapn>;break;
                        case 2:showText = <sapn style="color:#D38F0C">续费</sapn>;break;
                        case 3:showText = <sapn style="color:red">变更</sapn>;break;
                    }
                    return showText;
                },
            },
             {
                align: "left",
                title: "产品类型",
                dataIndex: "productionType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "baseProduction":showText = "基础产品";break;
                        case "callSetting":showText = "外呼套餐";break;
                        case "callAgent":showText = "外呼坐席";break;
                    }
                    return showText;
                },
            },
            {
                align: "left",
                title: "子产品名称",
                dataIndex: "productionName",
                width: 200,
            },
            {
                align: "center",
                title: "资费类型",
                dataIndex: "paymentType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 1:showText = "包年";break;
                        case 2:showText = "包月";break;
                        case 3:showText = "一次性";break;
                    }
                    return showText;
                },
            },
            {
                align: "center",
                title: "单位时间",
                dataIndex: "timeUnit",
                width: 100,
            },
            {
                align: "center",
                title: "单位数量",
                dataIndex: "timeNumber",
                width: 100,
            },
            {
                align: "center",
                title: "单价",
                dataIndex: "price",
                width: 100,
            },
            {
                align: "left",
                title: "订单时间",
                dataIndex: "createTime",
                width: 120,
            },
            {
                align: "center",
                title: "状态",
                dataIndex: "status",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 0:showText = <span style="color:#CD0019;">待支付</span>;break;
                        case 1:showText = <span style="color:#BA7E0B;">处理中</span>;break;
                        case 2:showText = <span style="color:#110002;">已取消</span>;break;
                        case 3:showText = <span style="color:#028C10;">交易成功</span>;break;
                        case 4:showText = <span style="color:#110002;">已过期</span>;break;
                        case 400:showText = <span style="color:#110002;">已废弃</span>;break;
                    }
                    return showText;
                },
            },
            {
                align: "center",
                title: "订单金额",
                dataIndex: "orderAmount",
                width:  100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:red;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },

        ];
        return {
           visible: false,
           modalTitle: "",
           disabledUserIds:[],
           columns,
           selectedKeys:[],
           selectedData:[],
           dataSource: [],
           postData: {
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        rowSelection() {
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                // getCheckboxProps: record => ({
                //     props: {
                //         disabled: record.status > 1, 
                //     },
                // }),
            };
        },
    },
    methods: {
        onModalOpen(postData){
            Object.assign(this,{postData});
            this.visible = true;
            this.pageList();
        },
        onModalClose(){
            this.visible = false;
            this.postData = {
                page:{
                    current: 1,
                    size: 20
                }
            }    
        },
        reLoadData(){
            this.pageList();
        },
           //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        //获取列表
        pageList () {
            const { postData } = this;
            sysPageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.dataSource = records;
                    this.dataSource.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //确认选择
        confirmSelect(){
            let _this = this;
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请选择记录');
                return;
            }
            this.$emit("callBack",this.selectedData);
        }
    }
}
</script>

<style>

</style>